<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>button 按钮</title>
</head>

<body>
 <div class="layui-container">
  <h3>用法</h3>
  <pre id="btn" class="layui-code button">
   var ssa=''jaslkd';
   <button type="button" class="layui-btn">一个标准的按钮</button>
   <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
  </pre>

  <h3>主题</h3>
  <div class="layui-row layui-col-specs15">
   <button type="button" class="layui-btn layui-btn-primary">原始primary</button>
   <button type="button" class="layui-btn "> 默认button</button>
   <button type="button" class="layui-btn layui-btn-normal"> 百搭normal</button>
   <button type="button" class="layui-btn layui-btn-warm">暖色warm</button>
   <button type="button" class="layui-btn layui-btn-danger">警告danger</button>
   <button type="button" class="layui-btn layui-btn-disabled">禁用disabled</button>
  </div>
  <br>
  <div class="layui-row layui-col-specs15">
   <button type="button" class="layui-btn layui-btn-primary layui-border-green">主色green</button>
   <button type="button" class="layui-btn layui-btn-primary layui-border-normal">百搭normal</button>
   <button type="button" class="layui-btn layui-btn-primary layui-border-orange">暖色orange</button>
   <button type="button" class="layui-btn layui-btn-primary layui-border-red">警告red</button>
   <button type="button" class="layui-btn layui-btn-primary layui-border-black">深色black</button>
  </div>

  <h3>尺寸</h3>
  <div class="layui-row layui-col-specs15">
   <button type="button" class="layui-btn layui-btn-lg">大型</button>
   <button type="button" class="layui-btn ">默认</button>
   <button type="button" class="layui-btn layui-btn-sm">小型</button>
   <button type="button" class="layui-btn layui-btn-xs">迷你</button>
  </div>
  <br>
  <div class="layui-row layui-col-specs15">
   <pre class="layui-code button">
    class="layui-btn layui-btn-fluid"
   </pre>
   <div class="layui-col-md8">
    <button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
   </div>

  </div>

  <h3>圆角</h3>
  <div class="layui-row layui-col-specs15">
   <button type="button" class="layui-btn layui-btn-radius layui-btn-primary">圆角</button>
   <pre class="layui-code button">
    class="layui-btn layui-btn-radius"
   </pre>
  </div>

  <h3>图标</h3>
  <div class="layui-row layui-col-specs15">
   <button type="button" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe608;</i>添加</button>
   <pre class="layui-code button">
    <button type="button" class="layui-btn">
     <i class="layui-icon">&#xe608;</i> 添加
    </button>
 
    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
     <i class="layui-icon">&#x1002;</i>
    </button>
   </pre>
  </div>

  <h3>按钮组</h3>
  <div class="layui-row layui-col-specs15">
   <pre class="button">
    <div class="layui-btn-group">
     <button type="button" class="layui-btn">增加</button>
     <button type="button" class="layui-btn">编辑</button>
     <button type="button" class="layui-btn">删除</button>
    </div>

    <div class="layui-btn-group">
     <button type="button" class="layui-btn layui-btn-sm">
      <i class="layui-icon">&#xe654;</i>
     </button>
     <button type="button" class="layui-btn layui-btn-sm">
      <i class="layui-icon">&#xe642;</i>
     </button>
     <button type="button" class="layui-btn layui-btn-sm">
      <i class="layui-icon">&#xe640;</i>
     </button>
     <button type="button" class="layui-btn layui-btn-sm">
      <i class="layui-icon">&#xe602;</i>
     </button>
    </div>

    <div class="layui-btn-group">
     <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
      <i class="layui-icon">&#xe654;</i>
     </button>
     <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
      <i class="layui-icon">&#xe642;</i>
     </button>
     <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
      <i class="layui-icon">&#xe640;</i>
     </button>
    </div>
   </pre>
  </div>


 </div>
 <script>
  ; !function () {
   var $ = layui.$
    , admin = layui.admin
    , element = layui.element
    , router = layui.router();

   layui.code({
    elem: '.button',
    encode: true,
    title: 'button',
    about: false,
    // skin: 'notepad'
   });

  }();
 </script>
</body>

</html>